<template>
  <div class="work">
    <div style="width: 100%; height: 400px; background: #fff">
      <h3>面板导航</h3>
      <div class="vis-area" id="chart"></div>
    </div>
    <div style="width: 100%; height: 100px; margin-top: 20px; background: #fff">
      <h3 style="border-bottom: 1px solid #ccc">快速导航</h3>
      <ul
        style="
          display: flex;
          justify-content: space-around;
          list-style: none;
          text-align: center;
          margin-top: 20px;
        "
      >
        <li @click="actical">文章管理</li>
        <li @click="comment">评论管理</li>
        <li @click="file">文件管理</li>
        <li @click="user">用户管理</li>
        <li @click="visit">访问管理</li>
        <li @click="system">系统设置</li>
      </ul>
    </div>
    <div>
      <div
        style="
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          border-bottom: 1px solid #ccc;
        "
      >
        <h3>最新文章</h3>
        <h3>全部文章</h3>
      </div>
      <div
        class="more"
        style="
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          margin-top: 20px;
        "
      >
        <div style="width: 33%; height: 200px; text-align: center">
          <p>文章封面</p>
        </div>
        <div style="width: 33%; height: 200px; text-align: center">
          <p>文章封面</p>
        </div>
        <div style="width: 33%; height: 200px; text-align: center">
          <p>文章封面</p>
        </div>
        <div style="width: 33%; height: 200px; text-align: center">
          <p>文章封面</p>
        </div>
        <div style="width: 33%; height: 200px; text-align: center">
          <p>文章封面</p>
        </div>
        <div style="width: 33%; height: 200px; text-align: center">
          <p>文章封面</p>
        </div>
      </div>
    </div>
    <div style="margin-top: 20px; border-bottom: 1px solid #ccc">
      <h3>最新评论</h3>
      <div>
        <a-list item-layout="horizontal" :data-source="state.list">
          <template #renderItem="{ item }">
            <a-list-item>
              <a-list-item-meta :description="item.name + '在'">
                <template #title>
                  评论{{}}
                </template>
                <template #avatar>
                  <a-avatar src="https://joeschmoe.io/api/v1/random" />
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import { defineComponent, onMounted, reactive } from 'vue'
import { GETMessage } from '../api/messageAdmin'
const data = [
  {
    title: 'Ant Design Title 1'
  },
  {
    title: 'Ant Design Title 2'
  },
  {
    title: 'Ant Design Title 3'
  },
  {
    title: 'Ant Design Title 4'
  }
]
export default defineComponent({
  setup() {
    const router = useRouter()
    const state = reactive({
      list: []
    })
    const actical = () => {
      router.push('/all/articles')
    }
    const comment = () => {
      router.push('/comment')
    }
    const file = () => {
      router.push('/file/management')
    }
    const user = () => {
      router.push('/user/management')
    }
    const visit = () => {
      router.push('/access/statistics')
    }
    const system = () => {
      router.push('/system/settings')
    }
    // 评论列表
    const getlist = async () => {
      const res = await GETMessage()
      state.list = res.data.data[0]
      console.log(state.list)
    }
    getlist()
    onMounted(() => {
      const myChart = echarts.init(document.getElementById('chart'))
      myChart.setOption({
        title: {
          text: '每周用户访问指标'
        },
        legend: {
          data: ['评论数', '访问量']
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 0,
            max: 400,
            interval: 100
          }
        ],
        series: [
          {
            name: '访问量',
            type: 'line',
            data: [360, 290, 350, 120, 100, 120, 170]
          },
          {
            name: '评论数',
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 130],
            itemStyle: {
              color: '#f12345'
            }
          }
        ]
      })
    })
    return {
      actical,
      comment,
      file,
      user,
      visit,
      system,
      data,
      state
    }
  }
})
</script>

<style>
.work {
  width: 100%;
  height: 100%;
}
.vis-area {
  width: 100%;
  height: 400px;
}
.more > div:hover {
  box-shadow: 4px 20px 40px 5px rgba(0, 0, 0, 0.1);
}
</style>